<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width:300px;
            margin:50px auto;
        }
    </style>

</head>
<body>
   <div id="box"></div>
   <script>
       var box = document.getElementById("box");

       datas = [
           { bookName:"红楼梦"},
           { bookName:"西游记"},
           { bookName:"水浒传"},
           { bookName:"三国演义"},
           { bookName:"孙子兵法"},
       ]
       for(var i = 0; i < datas.length ; i++){
           //创建ol节点
           var ul = document.createElement("ul");
           //将ol添加到div盒子中
           box.appendChild(ul);
           //定义data存储数组的每一项
           var data = datas[i];
           //遍历数组中的每一项
           for(var k in data){
            //创建li
            var li = document.createElement("li");
            // 将li添加到ol
            ul.appendChild(li);
            //添加数据给li
            li.innerText = data[k];

           }
       }
   </script>
</body>
</html>